<template>
    <div class="updateForm">
        <el-form
                ref="formData"
                :model="formData"
                :rules="rules"
                class="el-form"
                label-width="120px">
        <el-row>
            <div class="title-lable">
                <div class="label-name">
                    <label>概况</label>
                </div> 
            </div>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item
                    label="名称"
                    prop="zoneName">
                    <el-input
                        :disabled="true"
                        v-model="formData.zoneName"
                        placeholder=""/>
                </el-form-item>
            </el-col>
             <el-col :span="8">
                <el-form-item
                    label="编号"
                    prop="zoneId">
                    <el-input
                        v-model="formData.zoneId"
                        :disabled="true"
                        placeholder=""/>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item
                    label="类型"
                    prop="zoneType">
                    <el-select v-model="formData.zoneType" :disabled="true" filterable placeholder="请选择" >
                        <el-option
                            v-for="item in proTypeOptions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>       
        </el-row>
                <el-row>
            <el-col :span="8">
                <el-form-item
                    label="项目负责人"
                    prop="userId">
                    <el-select v-model="formData.userId" filterable @change="resetUserInfo($event)"  placeholder="请选择"  >
                        <el-option
                            v-for="item in userOptions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                            </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item
                    label="联系电话">
                    <el-input
                        v-model="formData.phonenumber"
                        :disabled = "true"
                        placeholder=""/>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item
                    label="涉及范围/m²"
                    prop="acreage">
                    <el-input
                        v-model="formData.acreage"
                        placeholder="请输入涉及范围/m²"/>
                </el-form-item>
            </el-col> 
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item
                    label="所在区域"
                    prop="addressOptions">
                    <el-cascader
                        class="addressOptions"
                        size="large"
                        :options="addressOptions"
                        v-model="formData.addressOptions"
                    > </el-cascader>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item
                    label="详细地址"
                    prop="address">
                     <el-input
                        class="address"
                        v-model="formData.address"
                        placeholder="XX街道XXXXXXX"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item
                    label="状态"
                    prop="progressStatus">
                    <el-select v-model="formData.progressStatus" filterable placeholder="请选择" >
                        <el-option
                            v-for="item in proState"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
    <el-row>
    <div v-if="formData.zoneType!='0'" >
        <el-row>
            <el-col :span="8">
            <el-form-item
            label="法定代表人"
            prop="corporation"
            class="">
            <el-input class="labelWidth"
                    v-model="formData.corporation"
                />
            </el-form-item>
            </el-col>
            <el-col :span="8">
            <el-form-item
            label="业主名称"
            prop="ownerName"
            class="">
            <el-input class="labelWidth"
                    v-model="formData.ownerName"
                />
            </el-form-item>
            </el-col>
            <el-col :span="8">
            <el-form-item
            label="社会信用代码"
            prop="creditCode"
            class="">
            <el-input class="labelWidth"
                    v-model="formData.creditCode"
                />
            </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item
                label="所属行业"
                prop="industryType"
                class="">
                <el-input class="labelWidth"
                        v-model="formData.industryType"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item
                label="调查周期"
                prop="beginDate"
                class="">
                    <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="开始日期" v-model="formData.beginDate" class="startTime"></el-date-picker>
                    <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="结束日期" v-model="formData.endDate" class="endTime"></el-date-picker>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-form-item label="绘制勘探路线">
                <div class="myMap">
                    <mymap @saveDraw="saveDraw" :formData="formData"/>
                </div>   
            </el-form-item>
        </el-row>
    </div>
    <el-form-item label="备注">
        <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model="formData.remark">
        </el-input>
        </el-form-item>
        </el-row>
        <el-row>
            <div class="title-lable">
                <div class="label-name">
                    <label>描述信息</label>
                </div> 
            </div>
        </el-row>
        <el-row>
            <el-form-item
                    label="描述信息"
                    prop="pzExplain">
                    <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="请输入内容"
                        v-model="formData.pzExplain">
                    </el-input>
                </el-form-item>
        </el-row>
        </el-form>
        <el-row class="save">
            <el-button type="primary" @click="updateSave">保存</el-button>
        </el-row>
    </div>
</template>

<script>
import { listUserAll} from "@/api/system/user";
import { listAgencyAll } from "@/api/system/agency";
import { getProZone,updateProZone} from "@/api/project/project";
import { listMethod2} from "@/api/method/method";
import mymap from '../../components/smallMap.vue';
export default {
    name: 'baseInfo',
    props:{
        zoneId:{},
        formDatas:{}
    },
    components:{
        mymap
        },
    data() {
        return {
            formData:{},
            // 表单校验
            rules: {
                zoneName: [
                    { required: true, message: "名称不能为空", trigger: "blur" }
                ],
                zoneType: [
                    { required: true, message: "类型必须选择", trigger: "blur" }
                ],
                userId: [
                    { required: true, message: "负责人不能为空", trigger: "blur" }
                ],
                addressOptions:[
                    { required: true, message: "区域不能为空", trigger: "blur" }
                ],
                address:[
                    { required: true, message: "详细地址不能为空", trigger: "blur" }
                ],
                progressStatus:[
                     { required: true, message: "状态不能为空", trigger: "blur" }
                ]
            },
            // 状态
            proState:[{"id": "0","label": "未开始"},
                     {"id": "1","label": "已开始"},
                     {"id": "2","label": "已完成"},
                     {"id": "3","label": "已作废"}],
            //项目类型
            proTypeOptions:[{"id": "0","label": "路探"},
                        {"id": "1","label": "场地污染"}],
            //用户选择Options
            userOptions:[],
            //地址选择
            addressOptions: this.regionData,
        };
    },

    created() {
        this.getOptionsUser()
        // this.getZoneInfo()
    },
    watch:{
        formDatas(val){
            this.formData = val
            this.formData.addressOptions = JSON.parse(val.addressOption)
            this.resetUserInfo(this.formData.userId)
        }
    },
    methods: {
        //获取分区信息
        getZoneInfo(){
            getProZone(this.zoneId).then(response => {
                this.formData = response.data;
            });
        },
         //获取机构用户列表，并转为options数据
        getOptionsUser(){
            const Params = {
                pageNum: 1,
                pageSize: 10000};
            listUserAll().then(
                response => {
                    this.userOptions = response.data.map(item => { return {"id":item["userId"],"label":item["userName"],"telephone":item["telephone"],"agencyId":item["agencyId"]} })  
                }
            );
             listAgencyAll().then(
                response => {
                    this.agencyOptions = this.resetOptions(response.data,"agencyId","agencyName");
                }
            )
        },
        //用户选择联动
        resetUserInfo(value){
            const valueObj= this.userOptions.find((item)=>{return item.id === value;});
            if(valueObj){
                 this.formData.phonenumber = valueObj.telephone;
            }
           
        },
        //项目信息保存
        updateSave(){
            this.$refs["formData"].validate(valid => {
                if (valid) {
                  updateProZone(this.formData).then(res=>{
                      this.msgSuccess("修改成功");
                      this.getZoneInfo()
                  })
                }
            })
        },
         //绘制区域
        saveDraw(val){
            this.formData.polygonList = val[0]
            // console.log(val)
        },
    },
};
</script>

<style lang="scss" scoped>
.updateForm{

}
.title-lable{
    display: flex;
    margin: 20px 0px;
    align-items: center; 
    padding-left: 26px;
    position: relative;
    label{
        margin-left: 10px;
        height: 20px;
        font-size: 14px;
        font-weight: 500;
        color: #222222;
        line-height: 20px;
    }
}
.label-name:before{
    content: " ";
    position: absolute;
    width: 3px;
    display: inline-block;
    height: 16px;
    /* right: -20px; */
    top: 50%;
    transform: translateY(-50%);
    background-color: #5378FF;
}
.save{
    position: absolute;
    bottom: 5px;
    left: 48%;
}
.addressOptions{
    width:445px;
}
.endTime{
    // margin-left: 5px;
}
.myMap{
    position: relative;
    width: 50%;
    height: 500px;
    border: 1px solid #BFBFBF;
}
</style>